<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	
.circleProgress_wrapper{
    width: 40px;
    height: 40px;
    margin: 50px auto;
    position: relative;
    border:1px solid #ddd;
}
.wrapper{
    width: 20px;
    height: 40px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}

.circleProgress{
    width: 32px;
    height: 32px;
    border:4px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}
.rightcircle{
    border-top:4px solid #2b589c;
    border-right:4px solid #2b589c;
    right:0;
}

.leftcircle{
    border-bottom:4px solid #2b589c;
    border-left:4px solid #2b589c;
    left:0;
}
.rightcircle{
    border-top:4px solid #2b589c;
    border-right:4px solid #2b589c;
    right:0;
    -webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
    border-bottom:4px solid #2b589c;
    border-left:4px solid #2b589c;
    left:0;
    -webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
    0%{
        -webkit-transform: rotate(45deg);
    }
    50%,100%{
        -webkit-transform: rotate(225deg);
    }
}
@-webkit-keyframes circleProgressLoad_left{
    0%,50%{
        -webkit-transform: rotate(45deg);
    }
    100%{
        -webkit-transform: rotate(225deg);
    }
}
/*.circle-icon {
	background: url('./circle.png') no-repeat;
	background-size: 100%;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
} */      
</style>
<body>
<div class="circleProgress_wrapper">
	<div class="circle-icon"></div>
    <div class="wrapper right">
        <div class="circleProgress rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circleProgress leftcircle"></div>
    </div>
 </div>
</body>
</html>